<template>
  <el-dialog
    title="预览文正"
    :visible="showPreview"
    width="70%"
    @close="handleClose"
    >
    <h2>{{data.title}}</h2>
    <p>
      <span>{{data.createTime}}</span>
      <span>{{data.username}}</span>
      <i class="el-icon-view"></i>
      <span>{{data.visits}}</span>
    </p>
    <div v-html="data.articleBody" class="box"></div>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/articles'
import dayjs from 'dayjs'
export default {
  props: {
    showPreview: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      data: {}

    }
  },
  methods: {
    handleClose () {
      this.$emit('update:showPreview', false)
      this.data = {}
    },
    async getPreviewList (data) {
      const { data: res } = await detail(data)
      if (res.createTime) {
        res.createTime = dayjs(res.createTime).format('YYYY-MM-DD HH:mm:ss')
      }
      this.data = { ...this.row, ...res }
    }
  }
}
</script>

<style scoped lang='scss'>
.el-dialog__body {
  i {
   margin-left:10px ;
  }
  span {
    margin-left:10px ;
  }
  .box {
    background: #f5f5f5;
    padding: 20px 10px;
    border-top: 1px dashed  ;
    img {
      background: #f5f5f5
    }
  }
}
</style>
